<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:p="http://primefaces.org/ui"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:c="http://java.sun.com/jsp/jstl/core"
              xmlns:f="http://java.sun.com/jsf/core">
    <c:if test="#{!sesion.activa}">
        <!--#{!sesion.comprobar()}-->
    </c:if>
    <c:if test="#{!pCReserva.consultarPermisos().ver}">
        <h:panelGroup layout="block" styleClass="divsinpermisos">
            <p:outputLabel value="No tiene permisos suficientes para ver esta página"/>
        </h:panelGroup>
    </c:if>
    <ui:param name="nombreparam" value="reserva" />

    <p:commandButton style="display:none" id="dummyBtn"/>
    <p:defaultCommand target="dummyBtn" />

    <h:panelGrid columns="3" id="paneldialogogriddata#{nombreparam}" styleClass="grid-modal">

        <h:outputText value="(*)Cliente:"/>  
        <p:autoComplete id="clienteUsuario#{nombreparam}" dropdown="true" value="#{pCReserva.nombreUsuario}"   
                        forceSelection="true" completeMethod="#{pCReserva.complete}" required="true" requiredMessage="El campo Cliente es obligatrio"/>
        <p:message display="icon" for="clienteUsuario#{nombreparam}"/>

        <h:outputText value="(*)Cantidad de Comensales:"/>
        <h:column>
            <p:spinner id="comensales#{nombreparam}" value="#{pCReserva.temporal.cantidad}"
                       min="1" size="3" required="true" label="Cantidad de Comensales" 
                       validatorMessage="El campo Cantidad de Comensales debe ser mayor que 0"
                       requiredMessage="El campo Cantidad de Comensales debe ser mayor que 0">
                <f:validateLongRange minimum="1" />
                <p:ajax update="mesas#{nombreparam}" partialSubmit="comensales#{nombreparam}"
                        listener="#{pCReserva.cargarMesas}" />
            </p:spinner>
        </h:column>
        <p:message display="icon" for="comensales#{nombreparam}" />

        <h:outputText value="(*)Fecha:"/>
        <h:column>
            <p:calendar id="fecha#{nombreparam}" size="14" value="#{pCReserva.fecha}" pattern="dd/MM/yyyy" 
                        maxlength="10" label="Fecha" navigator="true" effect="explode" required="true"
                        mindate="#{pCReserva.fechaActual}" showOn="button"
                        readonlyInput="true" requiredMessage="El campo Fecha es obligatrio">
                <p:ajax event="dateSelect" update="mesas#{nombreparam} horario#{nombreparam}" partialSubmit="fecha#{nombreparam}"
                        listener="#{pCReserva.establecerHorarios()}"/>
            </p:calendar>
        </h:column>
        <p:message display="icon" for="fecha#{nombreparam}" />

        <h:outputText value="(*)Horario:"/>
        <h:column>
            <p:selectOneMenu id="horario#{nombreparam}" value="#{pCReserva.temporal.horario}" required="true" 
                             style="margin-left:4px;margin-bottom: 5px;"
                             requiredMessage="Debe seleccionar un horario">
                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
                <f:selectItems value="#{pCReserva.horarios.entrySet()}" var="entry"
                               itemValue="#{entry.key}" itemLabel="#{entry.value}" />
                <p:ajax update="mesas#{nombreparam}" partialSubmit="horario#{nombreparam}"
                        listener="#{pCReserva.cargarMesas}" />
            </p:selectOneMenu>
        </h:column>
        <p:message display="icon" for="horario#{nombreparam}" />

        <h:outputText value="(*)Mesas:"/>
        <h:column>
            <p:selectCheckboxMenu id="mesas#{nombreparam}" value="#{pCReserva.selectedMesas}" style="margin-left:4px"
                                  label="Seleccione..." filter="false"  
                                  panelStyle="width:250px" required="true" 
                                  requiredMessage="Debe seleccionar al menos una mesa">  
                <f:selectItems value="#{pCReserva.mesas}"/>
            </p:selectCheckboxMenu>
            <p:tooltip for="mesas#{nombreparam}" value="Para ver la lista de mesas debe ingresar: cantidad de comensales, fecha y horario." />
        </h:column>
        <p:message display="icon" for="mesas#{nombreparam}" />

        <h:outputText value="Comentarios:"/>
        <h:column>
            <h:panelGroup layout="block" id="x1#{nombreparam}">
                <p:inputTextarea cols="32" rows="4" autoResize="false" counter="contador#{nombreparam}" maxlength="255"
                                 id="comentario#{nombreparam}" counterTemplate="{0} caracteres." 
                                 value="#{pCReserva.temporal.comentario}"/>
            </h:panelGroup>
            <h:panelGroup layout="block" id="x2#{nombreparam}">
                <h:outputText id="contador#{nombreparam}" style="font-size: 10px;"/>
            </h:panelGroup>
        </h:column>
        <h:column />

    </h:panelGrid>

</ui:component>
